<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用方式</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>

<script src="js/jquery-2.1.0.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求路径
            url: "usernameServlet",
            //异步
            async: true,
            //请求参数
            data: "username=" + username,
            //请求方式
            type: "post",
            //数据类型
            dataType: "text",
            //成功后回调函数
            success: function (data) {
                //响应的数据显示到span
                $("#uSpan").html(data)

            },
            //失败后都得回调函数
            error: function () {
                alert("操作未成功...")

            }
        });

    });

</script>
</html>